<template>
    <el-header class="header-bar">
        <div class="header-left">
            <el-button class="icon-btn" @click="$emit('toggle-sidebar')" :class="{ 'is-collapsed': isSidebarCollapsed }"
                circle>
                <el-icon>
                    <Fold v-if="!isSidebarCollapsed" />
                    <Expand v-else />
                </el-icon>
            </el-button>
            <el-button class="icon-btn" @click="$emit('refresh')" circle>
                <el-icon>
                    <Refresh />
                </el-icon>
            </el-button>
            <el-breadcrumb separator="/" class="header-breadcrumb">
                <el-breadcrumb-item v-for="(item, idx) in titleArr" :key="idx">{{ item }}</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="header-right">
            <el-button class="icon-btn" circle><el-icon>
                    <Bell />
                </el-icon></el-button>
            <el-button class="icon-btn" circle><el-icon>
                    <ChatLineRound />
                </el-icon></el-button>
            <el-button class="icon-btn" circle><el-icon>
                    <Message />
                </el-icon></el-button>
            <el-button class="icon-btn" circle><el-icon>
                    <Setting />
                </el-icon></el-button>
            <el-button class="icon-btn" circle @click="$emit('toggle-theme')">
                <el-icon v-if="!isDark">
                    <Sunny />
                </el-icon>
                <el-icon v-else>
                    <Moon />
                </el-icon>
            </el-button>
            <el-dropdown
                trigger="hover"
                @command="handleDropdownCommand"
                class="avatar-dropdown"
            >
                <span class="avatar-wrapper">
                    <el-avatar size="small" :src="avatarUrl" class="user-avatar" />
                </span>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item command="avatar">
                            <el-icon style="vertical-align: middle; margin-right: 6px;"><Picture /></el-icon>
                            修改头像
                        </el-dropdown-item>
                        <el-dropdown-item command="profile">
                            <el-icon style="vertical-align: middle; margin-right: 6px;"><User /></el-icon>
                            个人中心
                        </el-dropdown-item>
                        <el-dropdown-item command="password">
                            <el-icon style="vertical-align: middle; margin-right: 6px;"><Lock /></el-icon>
                            修改密码
                        </el-dropdown-item>
                        <el-dropdown-item divided command="logout">
                            <el-icon style="vertical-align: middle; margin-right: 6px;"><SwitchButton /></el-icon>
                            退出登录
                        </el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </div>
    </el-header>
    <ChangePasswordDialog ref="changePwdDialogRef" />
    <AvatarUploadDialog v-model="avatarUploadDialogRef" @success="handleAvatarSuccess" />
</template>
<script setup>
import { computed, ref } from 'vue'
import { Fold, Expand, Refresh, Bell, ChatLineRound, Message, Setting, Moon, Sunny, User, Lock, SwitchButton, Picture } from '@element-plus/icons-vue'
import { useUserStore } from '../stores/user'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import ChangePasswordDialog from './ChangePasswordDialog.vue'
import AvatarUploadDialog from './AvatarUploadDialog.vue'
const props = defineProps({
    isDark: Boolean,
    title: String,
    isSidebarCollapsed: Boolean
})
defineEmits(['toggle-theme', 'toggle-sidebar', 'refresh'])
const titleArr = computed(() => props.title ? props.title.split(' / ') : [])

const userStore = useUserStore()
const router = useRouter()
const avatarUrl = computed(() => userStore.userInfo?.avatarUrl || 'https://randomuser.me/api/portraits/men/32.jpg')

const changePwdDialogRef = ref()
const avatarUploadDialogRef = ref()

function openChangePwdDialog() {
  changePwdDialogRef.value.open()
}

function openAvatarUploadDialog() {
  avatarUploadDialogRef.value = true
}

function handleAvatarSuccess(data) {
  // 头像上传成功后的处理
  console.log('头像上传成功:', data)
}

const handleDropdownCommand = (command) => {
  if (command === 'avatar') {
    openAvatarUploadDialog()
  } else if (command === 'profile') {
    router.push('/user/profile')
  } else if (command === 'password') {
    openChangePwdDialog()
  } else if (command === 'logout') {
    userStore.logout()
    ElMessage.success('已退出登录')
    router.push('/auth')
  }
}
</script>
<style scoped>
.header-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 64px;
    background: var(--el-bg-color, #fff);
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.03);
    padding: 0 32px 0 0;
    position: sticky;
    top: 0;
    z-index: 100;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.icon-btn {
    background: transparent;
    border: none;
    color: var(--el-text-color-primary, #222);
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background 0.2s, color 0.2s;
    margin-right: 2px;
}

.icon-btn:hover {
    background: var(--el-fill-color-light, #f5f7fa);
    color: var(--el-color-primary, #409EFF);
}

.icon-btn.is-collapsed {
    color: var(--el-color-primary, #409EFF);
}

.header-breadcrumb {
    font-size: 16px;
    font-weight: 500;
    color: #222;
    margin-left: 12px;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 4px;
}

.user-avatar {
    margin-left: 12px;
}

.avatar-dropdown {
  margin-left: 12px;
}
.avatar-wrapper {
  display: flex;
  align-items: center;
  cursor: pointer;
}
.user-avatar {
  border: 2px solid #e0e0e0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  transition: box-shadow 0.2s, border-color 0.2s;
}
.user-avatar:hover {
  border-color: #409EFF;
  box-shadow: 0 4px 16px rgba(64,158,255,0.18);
}

/* 深色模式 */
:deep(.dark) .header-bar {
    background: #18181c !important;
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.16) !important;
}

:deep(.dark) .icon-btn {
    color: #e5eaf3 !important;
}

:deep(.dark) .icon-btn:hover {
    background: #232324 !important;
    color: #409EFF !important;
}

:deep(.dark) .icon-btn.is-collapsed {
    color: #409EFF !important;
}

:deep(.dark) .header-breadcrumb {
    color: #e5eaf3 !important;
}

:deep(.dark) .el-breadcrumb__item {
    color: #a8abb2 !important;
}

:deep(.dark) .el-breadcrumb__item:last-child {
    color: #e5eaf3 !important;
}
</style>